import 'package:flutter/material.dart';
import 'package:macnov/common/empty_data.dart';
import 'package:macnov/lib/chart/chart_bean.dart';
import 'package:macnov/lib/chart/view/chart_line.dart';
import 'package:macnov/stores/wallet.dart';
import 'package:macnov/utils/colorUtil.dart';
import 'package:macnov/utils/dateutil.dart';

class SummaryLineChart extends StatefulWidget {
  @override
  _SummaryLineChartState createState() => _SummaryLineChartState();
}

class _SummaryLineChartState extends State<SummaryLineChart> {
  String _formatDate = DateUtil.yyyymmFormat(DateTime.now().toString());

  Widget _buildChartCurve(context) {
    var monthlyCategoriess = walletStore.monthlyCategoriess;
    if (monthlyCategoriess.length == 0) return EmptyData();

    var chartBeans = walletStore.monthlyDatas
        .map((item) =>
            ChartBean(x: '${item.date}', y: double.parse(item.amount)))
        .toList();
    var chartLine = ChartLine(
      chartBeans: chartBeans,
      size: Size(MediaQuery.of(context).size.width,
          MediaQuery.of(context).size.height / 5 * 1.6),
      isCurve: true,
      lineWidth: 2,
      lineColor: ColorsUtil.hexColor(0xFFA947),
      fontColor: ColorsUtil.hexColor(0xAAAAAA),
      xyColor: Colors.white,
      shaderColors: [
        ColorsUtil.hexColor(0xFFA947),
        ColorsUtil.hexColor(0xFFFFFF),
      ],
      fontSize: 12,
      yNum: 8,
      isAnimation: true,
      isReverse: false,
      isCanTouch: true,
      isShowPressedHintLine: true,
      pressedPointRadius: 4,
      pressedHintLineWidth: 0.5,
      pressedHintLineColor: ColorsUtil.hexColor(0xAAAAAA),
      duration: Duration(milliseconds: 2000),
    );
    return Container(
      child: chartLine,
      padding: EdgeInsets.only(top: 30),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Text(
                'SPENDING CHAT',
                style: TextStyle(
                    color: ColorsUtil.hexColor(0x777777), fontSize: 14),
              ),
              new MaterialButton(
                child: Row(
                  children: <Widget>[
                    Text(
                      _formatDate,
                      style: TextStyle(
                          color: ColorsUtil.hexColor(0x346ACA), fontSize: 14),
                    ),
                    Icon(
                      Icons.arrow_drop_down,
                      color: ColorsUtil.hexColor(0x346ACA),
                    ),
                  ],
                ),
                onPressed: () {
                  showDatePicker(
                    context: context,
                    initialDate: new DateTime.now(),
                    firstDate: new DateTime.now()
                        .subtract(new Duration(days: 180)), // 减 30 天
                    lastDate: new DateTime.now()
                        .add(new Duration(days: 180)), // 加 30 天
                  ).then((DateTime time) {
                    var date = DateUtil.yyyymmFormat(time.toString());
                    _updateSpending(time.month, date);
                  }).catchError((err) {
                    print(err);
                  });
                },
              ),
            ],
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
          ),
          _buildChartCurve(context),
        ],
      ),
    );
  }

  _updateSpending(int month, String date) {
    setState(() {
      _formatDate = date;
    });
    walletStore.getMonthlyPayment(month);
    walletStore.getMonthlyPaymentCategory(month);
  }
}
